import React from "react"
import { Link } from "gatsby"

import { config } from "../../../config"
import { TurnPage } from "../../components/Pagination"
import s from "./article.module.css"

const PATH = config.path.news

const TASK_KEY_LABEL_MAP = {
	all: "全部新闻",
	vul: "产品动态",
	server: "服务公告",
}

const dateIcon = (
	<svg
		style={{ verticalAlign: "sub" }}
		width="18"
		height="18"
		viewBox="0 0 18 18"
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
	>
		<rect width="18" height="18" fill="url(#pattern0)" />
		<defs>
			<pattern
				id="pattern0"
				patternContentUnits="objectBoundingBox"
				width="1"
				height="1"
			>
				<use href="#image0" transform="scale(0.0454545)" />
			</pattern>
			<image
				id="image0"
				width="22"
				height="22"
				href=""
			/>
		</defs>
	</svg>
)

export default ({ info, pageContext: { previous, next } }) => {
	return (
		<div>
			<article className={s.article}>
				<div className={s.nav}>
					<Link to={`${PATH}`}>新闻中心</Link>
					<span className={s.cutIcon}>></span>
					<Link to={`${PATH}/${info.type}`}>
						{TASK_KEY_LABEL_MAP[info.type || "all"]}
					</Link>
					<span className={s.cutIcon}>></span>
					<span>详情</span>
				</div>
				<div className={s.title}>{info.title}</div>
				<div className={s.detail}>
					<div className={s.desc}>
						<div className={s.source}>来源：{info.author}</div>
						<div className={s.datetime}>
							<span>{dateIcon}</span>
							{info.datetime}
						</div>
					</div>
					<hr />
					<section
						dangerouslySetInnerHTML={{ __html: info.content }}
					/>
				</div>
			</article>
			<TurnPage previous={previous} next={next} path={PATH} />
		</div>
	)
}
